<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>

    <!-- 导入相关css文件 -->
    <link rel="stylesheet" type="text/css" href="../css/index_style.css"/>
</head>

<!-- 导入相关的js文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.0-beta.2/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="../js/index_js.js"></script>

<body>

<!-- 页面头部区域 -->
<div id="head_content">
    <div class="head_logo">
        <img src="../img/baidu_logo.png" height="25"/>
    </div>
    <div class="sub_title">
        新型冠状病毒肺炎
    </div>
    <div class="title">
        <h1>疫情实时大数据报告</h1>
    </div>
    <div class="readnum">
        共 8,173,099,278 人次已浏览
    </div>
</div>

<!-- 页面主体区域 -->
<div id="body_content">
    <!-- lab页 -->
    <div id="yiqing_lab">
        <div class="title">
            <h2>国内疫情</h2>
            <span>数据更新至 2022.11.26 14:26</span>
        </div>
    </div>
    <br><br><br>
    <!-- 国内疫情数据展示 -->
    <div id="yiqing_data_block">
        <div id="box" class="content">
            <div class="info_block">
                <span class="lab">密接</span>
                <span class="current_num">{{mijie}}</span>
                <span class="yestoday_num">昨日<span class="data">+3</span></span>
            </div>
            <div class="info_block">
                <span class="lab">无症状</span>
                <span class="current_num">{{asymptomatic}}</span>
                <span class="yestoday_num">昨日<span class="data">+12</span></span>
            </div>
            <div class="info_block">
                <span class="lab">时空伴随</span>
                <span class="current_num">66</span>
                <span class="yestoday_num">昨日<span class="data">+12</span></span>
            </div>
            <div class="info_block">
                <span class="lab">重症</span>
                <span class="current_num">66</span>
                <span class="yestoday_num">昨日<span class="data">+12</span></span>
            </div>
            <div class="info_block">
                <span class="lab">治愈</span>
                <span class="current_num">66</span>
                <span class="yestoday_num">昨日<span class="data">+12</span></span>
            </div>
            <div class="info_block">
                <span class="lab">死亡</span>
                <span class="current_num">66</span>
                <span class="yestoday_num">昨日<span class="data">+12</span></span>
            </div>
            <div class="info_block">
                <span class="lab">境外输入</span>
                <span class="current_num">66</span>
                <span class="yestoday_num">昨日<span class="data">+12</span></span>
            </div>
            <div class="info_block">
                <span class="lab">境内输入</span>
                <span class="current_num">66</span>
                <span class="yestoday_num">昨日<span class="data">+12</span></span>
            </div>
        </div>
    </div>

    <!-- 地图区域 -->
    <div id="map_block">

        <!-- 地图区域 -->
        <div id="main" class="content">

        </div>
        <script type="text/javascript">
            /*数据变量*/
            var resultData = [];
            $.ajax({
                type: "get",
                url: "/getPatientMapData",
                success: function (msg) {
                    resultData = msg;

                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));

                    myChart.showLoading();

                    $.get("../json/full.json", function (geoJson) {

                        myChart.hideLoading();

                        echarts.registerMap('HK', geoJson);

                        myChart.setOption(option = {

                            tooltip: {
                                trigger: 'item',
                                formatter: '{b}<br/>{c} (p / km2)'
                            },
                            toolbox: {
                                show: true,
                                orient: 'vertical',
                                left: 'right',
                                top: 'center',
                                feature: {
                                    dataView: {readOnly: false},
                                    restore: {},
                                    saveAsImage: {}
                                }
                            },
                            visualMap: {
                                min: 1,
                                max: 10,
                                text: ['High', 'Low'],
                                realtime: false,
                                calculable: true,
                                inRange: {
                                    color: ['lightskyblue', 'yellow', 'orangered']
                                }
                            },
                            series: [
                                {
                                    name: '香港18区人口密度',
                                    type: 'map',
                                    mapType: 'HK', // 自定义扩展图表类型
                                    label: {
                                        show: true
                                    },
                                    data: resultData
                                }
                            ]
                        });
                    });

                }
            });

        </script>
    </div>
</div>


<script>
    /* VUE部分 */
    var app = new Vue({
        el: "#box",
        data: {
            mijie: null,
            asymptomatic: null
        },
        mounted: function () {

            var that = this;

            $.ajax({
                type: "get",
                url: "/getPatientType",
                success: function (result) {
                    //alert(result);
                    for (var i = 0; i < result.length; i++) {
                        if (result[i].name === 1){
                            that.mijie = result[i].num;
                        }
                        if (result[i].name === 2){
                            that.asymptomatic = result[i].num;
                        }
                    }


                }
            });

            // $.ajax({
            //     type: "get",
            //     url: "/getAsymptomatic",
            //     success: function(result){
            //         //alert(result);
            //         that.asymptomatic = result;
            //     }
            // });

        }
    });
</script>

</body>
</html>